
<template>
  <div class="found">
    <div class="toubu">
      <router-link to="/found/recom" class="routeryi">推荐</router-link>
      <router-link to="/found/focus" class="routerer">关注</router-link>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect">
        
          <template #reference>
            <van-button type="primary"
              ><!--<span class="iconfont icon-fenlei2" id="tu"></span> --></van-button>
          </template>
        </van-popover>

      <span class="iconfont icon-fenlei2" id="tu" ></span>
    </div>

    <router-view></router-view>
    <Bottom />
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: "搜索" }, { text: "修改关注" }, { text: "我的手记" }],
    };
  },
  methods: {
    onSelect(action) {
      Toast(action.text);
    },
  },
};
</script>

<style scoped>
.routeryi {
  padding-left: 0.17rem;
  padding-right: 0.31rem;
  font-size: 0.16rem;
}
.routerer {
  padding-right: 0.22rem;
  font-size: 0.16rem;
}
#tu {
  margin-left: 1.8rem;
  color: black;
  position: relative;
  top: 0;
}

.toubu {
  position: fixed;
  line-height: 0.44rem;
  background-color: white;
  width: 100%;
}
.van-button {
  background-color: white;
  border: none;
  position: absolute;
  left: 3.05rem;
   z-index: 8888;
   opacity: 0;
}
</style>